<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

</head>
<body>
    <div id="root"></div>
    <script src="../../js/react.js" charset="utf-8"></script>
    <script src="../../js/react-dom.js" charset="utf-8"></script>
    <script src="../../js/browser.min.js" charset="utf-8"></script>
    <script type="text/babel">
    function formatDate(date) {
        return date.toLocaleDateString()
    }

    function Avatar(props) {
        return (
            <img className="Avatar" src={props.user.avatarUrl} alt={props.user.name}/>
        )
    }

    function UserInfo(props) {
        return (
            <div className="UserInfo">
            <Avatar user={props.user} />
            <div className="UserInfo-name">
            {props.user.name}
            </div>

            </div>
        )
    }

    function Comment(props) {
        return (
            <div className="Comment">
                <UserInfo user={props.author} />
                <div className="Comment-text">
                    {props.text}
                </div>
                <div className="Comment-date">
                    {formatDate(props.date)}
                </div>
            </div>
        )
    }

    const comment = {
        date: new Date(),
        text: 'I hope you enjoy learning React!',
        author: {
            name: 'Hello Kitty',
            avatarUrl: 'http://placekitten.com/g/64/64'
        }
    };
    ReactDOM.render(
        <Comment
        date={comment.date}
        text={comment.text}
        author={comment.author} />,
        document.getElementById('root')
    );
    </script>
</body>
</html>
